<template>
	<view class="qh-radio flex-cn" :style="customStyles" @click="chooseCode">
		<view :style="iconBoxStyle">
			<text class="qh-rt-single qh-radio__choose-icon" :class="{
			'disabled': disabled,
			'checked': value === activeValue,
			'qh-rt-xuanzhong': value === activeValue,
			'qh-rt-weixuanzhong': value !== activeValue}" :style="iconStyles"></text>
		</view>
		<view v-if="$slots['default']" class="qh-radio__text">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'qh-radio',
		props: {
			value: {
				type: [String, Number, Boolean],
				default: false,
			}, //选中状态
			activeValue: {
				type: [String, Number, Boolean],
				default: true,
			},
			inactiveValue: {
				type: [String, Number, Boolean],
				default: false,
			},
			size: {
				type: [String, Number],
				default: 40
			}, //图标大小
			customStyle: {
				type: [String, Object],
				default () {
					return {}
				}
			}, //自定义样式
			disabled: {
				type: Boolean,
				default: false,
			}, //是否禁止修改状态
			padding: {
				type: [String, Number],
			},
		},
		emits: ['update:value', 'change', 'input'],
		computed: {
			customStyles() {
				return this.$joinStyle(this.customStyle)
			},
			iconBoxStyle() {
				return this.padding ? ('padding:' + this.$getUnitSize(this.padding) + ';') : '';
			},
			iconStyles() {
				return this.size ? ('font-size:' + this.$getUnitSize(this.size) + ';line-height:' + this.$getUnitSize(this.size)) : '';
			},
		},
		methods: {
			chooseCode() {
				if (this.disabled) return;
				let value = this.value === this.activeValue ? this.inactiveValue : this.activeValue;
				this.$emit('update:value', value);
				this.$emit('input', value);
				this.$nextTick(() => {
					this.$emit('change', value);
				})
			},
		},
	}
</script>

<style lang="scss">
	qh-radio+qh-radio {
		margin-left: 60rpx;
	}

	.qh-radio {
		display: inline-flex;
		vertical-align: top;

		.qh-radio__choose-icon {
			font-size: 40rpx;
			color: #C8C9CB;
			border-radius: 50%;

			&.checked {
				color: var(--primary-color);

				&.disabled {
					opacity: 0.8;
				}
			}

			&.disabled {
				background-color: #F2F3F5;
			}
		}

		.qh-radio__text {
			font-size: 32rpx;
			line-height: 36rpx;
			color: #5F6267;
		}
	}
</style>
